<template>
    <div class="organization-tree-wrapper">
        <div 
            class="organization-item" 
            :style="{ paddingLeft: (level * 20 + 15) + 'px' }"
        >
            <van-radio 
                v-if="selectable && !hasChildren"
                class="organization-radio"
                checked-color="#3772ff"
                :name="uniqueId"
                @click.stop
            />
            <div class="organization-content" @click="handleClick">
                <div class="organization-icon">
                    <van-icon name="apps-o" size="20" color="#fff" />
                </div>
                <div class="organization-name">{{ orgName }}</div>
                <div class="organization-arrow" v-if="hasChildren" @click.stop="toggleExpand">
                    <van-icon 
                        :name="isExpanded ? 'arrow-down' : 'arrow'" 
                        size="16" 
                        color="#999" 
                    />
                </div>
            </div>
        </div>
        <div v-if="isExpanded && hasChildren" class="organization-children">
            <organization-tree-item
                v-for="(child, index) in children"
                :key="child.nodeId || child.deptId || index"
                :org="child"
                :level="level + 1"
                :selectable="selectable"
                @select="$emit('select', $event)"
            />
        </div>
    </div>
</template>

<script>
export default {
    name: 'OrganizationTreeItem',
    props: {
        org: {
            type: Object,
            required: true
        },
        level: {
            type: Number,
            default: 0
        },
        selectable: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isExpanded: false
        }
    },
    computed: {
        hasChildren() {
            const children = this.getChildren()
            return children && children.length > 0
        },
        children() {
            return this.getChildren()
        },
        orgName() {
            return this.org.nodeName || this.org.name || this.org.deptName || ''
        },
        uniqueId() {
            return this.org.nodeId || this.org.deptId || this.org.id || this.org.value || this.org.name
        }
    },
    methods: {
        getChildren() {
            return (
                this.org.childList ||
                this.org.children ||
                this.org.sonDeptInfos ||
                this.org.sonDeptInfoList ||
                []
            )
        },
        toggleExpand() {
            if (this.hasChildren) {
                this.isExpanded = !this.isExpanded
            }
        },
        handleClick() {
            if (this.hasChildren) {
                this.toggleExpand()
            }
            this.$emit('select', this.org)
        }
    },
    // 递归组件：在 beforeCreate 中注册自己
    beforeCreate() {
        this.$options.components.OrganizationTreeItem = require('./OrganizationTreeItem.vue').default
    }
}
</script>

<style scoped lang="less">
.organization-tree-wrapper {
    width: 100%;
}

.organization-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 15px;  
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.2s;
    
    &:last-child {
        border-bottom: none;
    }
    
    &:active {
        background-color: #f9f9f9;
    }
}

.organization-content {
    flex: 1;
    display: flex;
    align-items: center;
}

.organization-radio {
    margin-right: 10px;
    margin-top: 6px;
}

.organization-children {
    background-color: #fff;
}

.organization-icon {
    margin-right: 12px;
    flex-shrink: 0;
    background-color: #3772ff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    margin-right: 15px;
}

.organization-name {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.organization-arrow {
    margin-left: 8px;
    flex-shrink: 0;
}
</style>

